<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('结算单列表')" />
    <th:block th:include="include :: select2-css" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list" id="userWorker">
                        <ul>
                            <li>
                                <label class="text-center" >水电师傅：</label>
                            </li>
                            <li>
                                <select name="workerId" class="workerChoose form-control" onchange="workerChange()"><option value="">全部</option></select>
                            </li>
                            <li>
                                <label class="text-center">客户名称：</label>
                            </li>
                            <li>
                                <select name="consumerId" class="userChoose form-control" onchange="$.table.refresh()"><option value="">全部</option></select>
                            </li>
                            <li>
                                <label>师傅结清：</label>
                                <select name="orderStatus" class="form-control" th:with="type=${@dict.getType('close_clear')}" onchange="$.table.refresh()">
                                    <option value="">所有</option>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                </select>
                            </li>
                            <li>
                                <label>客户付清：</label>
                                <select name="orderSale" class="form-control" th:with="type=${@dict.getType('close_pay')}" onchange="$.table.refresh()">
                                    <option value="">所有</option>
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                </select>
                            </li>
                            <li>
                                <a class="btn btn-warning btn-rounded btn-sm" onclick="location.reload()"><i class="fa fa-refresh"></i>&nbsp;刷新</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: select2-js" />
    <th:block th:include="include :: jquery-cxselect-js" />
    <script th:inline="javascript">

        var orderClearDatas = [[${@dict.getType('close_clear')}]];
        var orderPayDatas = [[${@dict.getType('close_pay')}]];

        $(function() {
            var options = {
                url: ctx + "close/manage/list",
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                modalName: "结算单",
                columns: [{
                    radio: true
                },
                {
                    field: 'orderId',
                    align: 'center',
                    width: '10',
                    widthUnit: '%',
                    title: '订单号'
                },
                {
                    field: 'workerName',
                    align: 'center',
                    title: '水电师傅'
                },
                {
                    field: 'consumerName',
                    align: 'center',
                    title: '客户'
                },
                {
                    field: 'totalMoney',
                    align: 'center',
                    title: '总计'
                },
                {
                    field: 'orderDebt',
                    align: 'center',
                    title: '累欠'
                },
                {
                    field: 'remark',
                    align: 'center',
                    title: '共实付'
                },
                {
                    field: 'orderStatus',
                    title: '师傅结清',
                    align: 'center',
                    formatter: function(value, row, index) {
                       return $.table.selectDictLabel(orderClearDatas, value);
                    }
                },
                {
                    field: 'orderSale',
                    title: '客户付款',
                    align: 'center',
                    formatter: function(value, row, index) {
                       return $.table.selectDictLabel(orderPayDatas, value);
                    }
                },
                {
                    field: 'createTime',
                    title: '结算日期',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var date = new Date(value);
                        var day = date.getDate();
                        day = day < 10 ? '0' + day : day;
                        var month = date.getMonth();
                        month += 1;  // JavaScript months are 0-11
                        month = month < 10 ? '0' + month : month;
                        var year = date.getFullYear();
                        return year + '-' + month + '-' + day
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-primary btn-xs ' + '" href="javascript:void(0)" onclick="viewOrder(\'' + row.orderId + '\')"><i class="fa fa-television"></i>详情</a> ');
                        if(row.orderStatus == '3'){
                            actions.push('<a class="btn btn-success btn-xs ' + '" href="javascript:void(0)" onclick="clearOrder(\'' + row.orderId + '\')"><i class="fa fa-edit"></i>师傅结清</a> ');
                        }
                        if(row.orderSale == '0'){
                            actions.push('<a class="btn btn-warning btn-xs ' + '" href="javascript:void(0)" onclick="payOrder(\'' + row.orderId + '\')"><i class="fa fa-credit-card"></i>客户付款</a> ');
                        }
                        return actions.join('');
                    }
                }]
            };
            $.table.init(options);
        });

        //拉取师傅信息
        $(function () {
            $.ajax({
                type: "post",
                url: ctx + "hh/user/selectList",
                data: {
                  "roleId": 101
                },
                success: function(result) {
                    if (result.code == 0) {
                        $('#userWorker').cxSelect({
                            required: false,
                            firstTitle: '全部',
                            selects: ['workerChoose'],
                            jsonName: 'name',
                            jsonValue: 'id',
                            data: result.data
                        });
                    }
                }
            })
        });

        //拉取客户信息
        function workerChange() {
            $.ajax({
                type: "post",
                url: ctx + "hh/user/selectList",
                data: {
                    "workerId": $(".workerChoose").val()
                },
                success: function(result) {
                    if (result.code == 0) {
                        $('#userWorker').cxSelect({
                            required: false,
                            firstTitle: '全部',
                            selects: ['userChoose'],
                            jsonName: 'name',
                            jsonValue: 'id',
                            data: result.data
                        });
                        $.table.refresh();
                    }
                }
            })
        }
        
        //查看结算
        function viewOrder(orderId) {
            var index = layer.open({
                type: 2,
                area: ['800px', '700px'],
                shade: 0.3,
                title: '结算详情',
                content: ctx + "close/manage/detail/" + orderId,
                btn: [],
                end: function () {
                    $.table.refresh();
                }
            });
            layer.full(index);
        }
        
        //客户付款
        function payOrder(orderId) {
            layer.open({
                type: 2,
                area: ['500px', '400px'],
                shade: 0.3,
                title: '付款',
                content: ctx + "close/manage/pay/" + orderId,
                btn: [],
                end: function () {
                    $.table.refresh();
                }
            });
        }

        //师傅结清
        function clearOrder(orderId) {
            layer.open({
                type: 2,
                area: ['500px', '300px'],
                shade: 0.3,
                title: '结清',
                content: ctx + "close/manage/clear/" + orderId,
                btn: [],
                end: function () {
                    $.table.refresh();
                }
            });
        }

    </script>
</body>
</html>